<!--
 * @Description: 征询意见页面
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-10-19 16:33:38
 * @LastEditTime: 2023-03-10 09:31:56
 * @FilePath: \cscec-pms-admin\src\views\matters\solicitingOpinions\index.vue
-->
<template>
  <base-breadcrumb>
    <a-card>
      <title-name title="征询意见" />
      <a-spin :spinning="loading">
        <a-descriptions
          class="mb20"
          :column="2"
        >
          <a-descriptions-item label="征询人">
            {{ opinions.userName }}
          </a-descriptions-item>
          <a-descriptions-item label="征询开始时间">
            {{ opinions.createTime }}
          </a-descriptions-item>
          <a-descriptions-item label="征询意见">
            {{ opinions.opinions }}
          </a-descriptions-item>
        </a-descriptions>
      </a-spin>
      <title-name title="征询回复" />
      <custom-form
        ref="form"
        :is-validate="true"
        :edit-model="''"
        :rules="rules"
        :form="form"
        :form-list="formOption"
        class="requiredFormItem"
      />
      <div
        v-if="!detail"
        class="soliciting-opinions-btn-wrapper"
      >
        <a-button
          type="primary"
          class="mb20"
          :disabled="loading"
          :loading="confirmLoading"
          @click="reply"
        >
          确认回复
        </a-button>
      </div>
      <!-- 意见征询列表 -->
      <Consultation
        ref="consultation"
        :proc-inst-id="procInstId"
        :is-show-btn="false"
      />
      <!-- 意见征询列表 -->
      <div class="tool-btns page-btn-right-top soliciting-opinions-close">
        <a-button @click="handleClose">
          关闭
        </a-button>
      </div>
    </a-card>
    <AuditBusinessDetail
      v-if="audit"
      ref="auditBusinessDetail"
      :consultation-props="consultationProps"
    />
  </base-breadcrumb>
</template>
<script>
import { formOption } from './model.js'
import Consultation from '@/views/matters/approval/components/consultation'
import { getById, update } from '@/api/process'
import AuditBusinessDetail from '@/views/matters/AuditBusinessDetail'
import { finishBusinessTodo } from '@/api/commons.js'
export default {
  name: 'SolicitingOpinions',
  components: {
    Consultation,
    AuditBusinessDetail
  },
  data() {
    return {
      // 征询意见信息
      opinions: {
        userName: '',
        createTime: '',
        opinions: ''
      },
      // 表单对象
      form: {
        replyOpinions: ''
      },
      // 路由参数
      query: this.$route.query,
      // 流程id
      procInstId: this.$route.query.procInstId,
      // 审批详情参数
      consultationProps: {},
      // 表单加载
      loading: false,
      // 回复加载
      confirmLoading: false,
      // 用于处理意见征询时候刷新页面详情
      audit: false
    }
  },
  created() {
    this.getProcessDetail()
    this.audit = true
  },
  computed: {
    // 处理信息(仅查看)
    detail() {
      return !!this.query?.resolveInfo
    },
    // 表单项
    formOption() {
      return formOption.map((item) => {
        item.disabled = this.detail
        return item
      })
    },
    // 表单校验
    rules() {
      const obj = {}
      this.formOption.map((item) => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    }
  },
  watch: {
    // 路由改变
    $route: {
      handler(val) {
        this.query = val.query
        if (val.query.hasOwnProperty('procInstId')) {
          this.getProcessDetail()
          this.audit = true
        } else {
          this.audit = false
        }
      }
    }
  },
  methods: {
    /**
     * @description: 获取流程id
     * @return {void}
     */
    getProcessDetail() {
      const { businessType, businessId, detailUrl } = this.query
      this.consultationProps = {
        businessType,
        businessId,
        detailUrl
      }
      this.getDetail(this.query.opinionsId + '')
      // this.$refs.consultation.getData()
      // this.$refs.auditBusinessDetail.initPage()
    },
    /**
     * @description: 获取征询信息
     * @param {string} id 征询id
     * @return {void}
     */
    getDetail(id) {
      this.loading = true
      getById(id)
        .then((res) => {
          if (res.code === this.SUCCESS_CODE) {
            this.opinions = res.data
            if (this.detail) {
              this.form.replyOpinions = res.data.replyOpinions
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 回复
     * @return {void}
     */
    reply() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          update({
            id: this.query.updateId + '',
            replyOpinions: this.form.replyOpinions
          })
            .then(async (res) => {
              if (res.code === this.SUCCESS_CODE) {
                await finishBusinessTodo({ id: this.query.todoId + '' })
                this.$message.success('回复成功')
                this.$close()
                window.postMessage('finish', window.location.origin)
              }
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    /**
     * @description: 关闭
     * @return {void}
     */
    handleClose() {
      this.$close()
      // 刷新列表页
      console.log('需要关闭')
      window.postMessage('finish', window.location.origin)
    }
  }
}
</script>
<style lang="less" scoped>
.soliciting-opinions {
  padding: 20px;
}
.soliciting-opinions-btn-wrapper {
  display: flex;
  justify-content: flex-end;
}
.soliciting-opinions-close {
  z-index: 1000;
}
</style>
